import LogicFlow from "@logicflow/core";
import "@logicflow/core/dist/style/index.css";
import "@logicflow/extension/lib/style/index.css";
import {FlowOpt, FlowOtherEvent, FlowOtherType, NodeClassType} from "./types.ts";
import {Ref, ref} from "vue";
import {MenuWidth} from "../config";
import {OperateEnum} from "./enum.ts";

let lf: any = null;
/**
 * 初始化
 */
export const useFlowInit = (opt: FlowOpt) => {
    const {nodes, plugins, events} = <FlowOtherType>opt.othOpt;
    loadPlug();
    init();

    function init(): void {
        lf = new LogicFlow({
            ...opt.options
        });
        lf.render();
        useRegister((nodes as any));
    }

    function loadPlug(): void {
        if (plugins && Array.isArray(plugins)) {
            plugins.forEach(item => {
                LogicFlow.use(item);
            });
        }
    }

    if (events && Array.isArray(events)) {
        const {eventCenter} = lf.graphModel;
        events.forEach((item: FlowOtherEvent): void => {
            const {key, func} = item
            eventCenter.on(`node:${key}`, (args: any): void => {
                func(args);
            });
        })
    }
    lf.setTheme({
                baseEdge: {strokeWidth: 1},
                baseNode: {strokeWidth: 1},
                nodeText: {overflowMode: 'autoWrap', lineHeight: 1.5},
                edgeText: {overflowMode: 'autoWrap', lineHeight: 1.5}
    });
    return lf;
};

/**
 * 清空场景
 */
export function useClearFlow(isDestroy: boolean = false): void {
    if (!lf) {
        return alert('logicflow对象未注册！')
    }
    lf.clearData();
    isDestroy && (lf = null);
}

/**
 * 注册形状
 */
export function useRegister(nodes: any[]): void {
    if (!nodes) {
        return;
    }
    if (Array.isArray(nodes)) {
        nodes.forEach(item => {
            lf.register(item);
        });
    } else {
        console.error('注册节点参数应为数组！')
    }
}

/**
 * 框选
 */
export function useOperate(type: OperateEnum): void {
    if (!lf) {
        return alert('logicflow对象未注册！')
    }
    lf.extension.selectionSelect.closeSelectionSelect();
    switch (type) {
        case OperateEnum.Select:
            lf.extension.selectionSelect.openSelectionSelect();
            break;
        case OperateEnum.ZoomIn:
            lf.zoom(true);
            break;
        case OperateEnum.ZoomOut:
            lf.zoom(false);
            break;
        case OperateEnum.Undo:
            lf.undo();
            break;
        case OperateEnum.Redo:
            lf.redo();
            break;
        case OperateEnum.Save:
            console.log(lf.getGraphRawData());
            break;
        case OperateEnum.Clear:
            lf.clearData();
            break;
        case OperateEnum.Adapt:
            lf.resetZoom();
            break;
    }
}

/**
 * 导出
 */
export function download(filename: string = 'fileName.txt', text: string): void {
    const element = document.createElement('a');
    element.setAttribute(
            "href",
            "data:text/plain;charset=utf-8," + encodeURIComponent(text)
    );
    element.setAttribute("download", filename);
    element.style.display = "none";
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
}

/**
 * 点击节点
 */
export function useClick(args: any): void {
    console.log(args);
}

/**
 * 添加节点
 */
export function useAddNode(node: NodeClassType): void {
    const {type, text, properties} = node;
    if (!lf) {
        return alert('logicflow对象未注册！')
    }
    lf.dnd.startDrag({
        type,
        text,
        properties
    });
}

/**
 * 用于左侧菜单
 */
let leftStyle = ref({
    width: `${MenuWidth}px`
});
let rightStyle = ref({
    width: `calc(100% - ${MenuWidth}px)`
});
let showMenu = ref(true);

export function useMenu() {
    function closeMenu() {
        showMenu.value = false;
        leftStyle.value = {
            width: '0'
        };
        rightStyle.value = {
            width: 'calc(100%)'
        }
    }

    function openMenu() {
        showMenu.value = true;
        leftStyle.value = {
            width: `${MenuWidth}px`
        };
        rightStyle.value = {
            width: `calc(100% - ${MenuWidth}px)`
        }
    }

    return {
        leftStyle,
        rightStyle,
        showMenu,
        closeMenu,
        openMenu
    }
}

/**
 * 用于点击节点
 */
let currentFlow: Ref<string> = ref('');

export function useCurrentFlow() {
    function clickFlow(project: string): void {
        currentFlow.value = project;
    }

    return {
        currentFlow,
        clickFlow
    }
}
